<template>
  <div id="container" ref="container" :class="{ 'absorb': absorb }" @dragover="handleDragover" @drop="handleDrop">
  </div>
  <Navigator />
</template>
<script setup lang="ts">
import { getProjectManager } from '@/scripts/getProjectManager';
import { nextTick, onBeforeUnmount, ref } from 'vue';
import { createVueDisposer, toVR } from "earthsdk-ui";
import Navigator from '@/components/common/Navigator.vue';
import { getUrlParam } from '@/scripts/utils';
import { MaterailsManager } from '@/scripts/cimrtsManager/materailsManager';

const container = ref<HTMLDivElement>()
const objm = getProjectManager();
const d = createVueDisposer(onBeforeUnmount)
const switchEngine = objm.switchEngine

const domId = toVR<any>(d, [switchEngine, "domId"]);

const absorb = ref(false);

nextTick(() => {
  if (!container.value) return;
  domId.value = container.value;
  const viewer = objm.createCesiumViewer(container.value);
  d.dispose(viewer.statusChanged.disposableOn(status => {
    if (status == 'Created') {
      const obj = getUrlParam();
      // @ts-ignore
      if (!(obj.hasOwnProperty("cameraInfo")) || !obj.cameraInfo) return;
      // @ts-ignore
      const cameraInfo = JSON.parse(obj.cameraInfo as string)
      setTimeout(() => {
        viewer.flyIn(cameraInfo.position, cameraInfo.rotation, 1)
      }, 2000)
    }
  }))

  d.dispose(objm.cimrtsManager.absorbEvent.disposableOn((val) => {
    absorb.value = val
  }))

})

const handleDragover = (e: DragEvent) => {
   if (objm.activeViewer?.typeName == "ESUeViewer") {
    console.log("ESUeViewer不起作用");
    return;
  }
  e.preventDefault();
}

const handleDrop = (e: DragEvent) => {
  if (objm.activeViewer?.typeName == "ESUeViewer") {
    console.log("ESUeViewer不起作用");
    return;
  }
  e.preventDefault();
  const data = e.dataTransfer?.getData("text/plain") as string;
  objm.cimrtsManager.materailsManager?.dragEvent.emit("scene", e, data)
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
  background-color: #64927370;
}

.absorb {
  /* cursor: crosshair; */
  cursor: url(../assets/cimrts/materailsManager/xiguan2.png) 0 20, auto;

}
</style>
